<%@ page contentType="text/html;charset=UTF-8" pageEncoding="UTF-8"%>
<%@ page import="com.yaodian100.core.common.utils.ServerValue"%>
<%@ taglib prefix="s" uri="/struts-tags"%>
<%@ include file="/taglibs.jsp"%>
<c-rt:set var="midContextPath" value='<%=ServerValue.getMidContextPath() %>'/>
<c-rt:set var="imgDomain" value='<%=ServerValue.getImgDomain() %>'/>
<!-- 数字验证 -->
<script type="text/javascript" charset="UTF-8" src="${midContextPath}/js/jquery.alphanumeric.js"></script>
<script type="text/javascript" charset="UTF-8" src="${midContextPath}/js/yaodian100.common.js"></script>
<script language="javascript">
	$().ready(function(){
		$("#submitButton").click(function() {			
			if (!validateBlockBanners()) {
				return false;
			}
			
			$("#blockBannerForm").submit();
			return false;
		});

		$("#cancelCreateBlockBanner").click(function(){
			$("#createBlockProductDialog").dialog("close");
			return false;
		});
		
		$(":input[id*='clearImg']").each(function(){
			$(this).click(function(event){
				event.preventDefault();
				var id = this.id.substring(8);
				$("#imageCorrect"+id).val("Y");
				$("#bannerImage"+id).val("");
				$("#bannerPreviewImage"+id).attr("src",$("#defaultImage"+id).val());
			});

		});
	});

	function validateBlockBanners() {
		var result = true;
		$(":input[id*='imageCorrect']").each(function(){
			var imgObjId = this.id.substring(12);
			if ($(this).val() == "Y") {
				alert("请选择上传图片")
				$("#"+imgObjId).focus();
				result = false;
				return false;
			}
			if ($(this).val() != "") {
				alert($(this).val());
				$("#"+imgObjId).focus();
				result = false;
				return false;
			}
			
		});
		
		$(":input[name*='targetUrl']").each(function(){
			if (!validateById(this.id,"图片连结")) {
				result = false;
				return false;
			}
		});
		return result;
	}
	function validateById(id,inputDesc,fullMsg) {
		var obj = $("#"+id);
		if(obj.val() == '') {
			if (inputDesc != null) {
				alert("请输入"+inputDesc);
			} else if (fullMsg != '') {
				alert(fullMsg);
			}
			obj.focus();
			return false;
		}
		return true;
	}
	
	function checkUploadBanner(id,fileSize,width,height,identify) {
		var imgObj = document.getElementById(id);
		checkImg(imgObj,fileSize,width,height,$("#"+identify),"");
	}

</script>
<input type="hidden" id="template.id" value="${template.id}">
<div class="act-template-area">
    <!--- 组 -->
    <s:form id="blockBannerForm" action="blockbanner/saveBlockBanners.do" method="POST" enctype ="multipart/form-data">
    	<s:hidden name="block.id"></s:hidden>
		<div>			
			<c-rt:forEach items="${blockBanners}" var="banner" varStatus="status">
				<div style="float:left;margin-left:10px;">
				<div>
					<c:if test="${not empty banner.imagePath}">
						<img id="bannerPreviewImage${status.count-1}" src="${banner.imagePath}?uid=<%=new java.util.Date().getTime()%>" style="border:1px solid gray">
						<c:set var="imgCorrect" value=""/>
					</c:if>
					<c:if test="${empty banner.imagePath}">
						<img id="bannerPreviewImage${status.count-1}" src="${imgDomain}/images/ad/${template.templateFormat.imageSize[status.count-1][0]}x${template.templateFormat.imageSize[status.count-1][1]}.gif" style="border:1px solid gray">
						<c:set var="imgCorrect" value="Y"/>
					</c:if>
				</div>
				<div>
					上传图片：
					<input type="file" name="blockBanners[${status.count-1}].bannerImage" id="bannerImage${status.count-1}" onchange="checkUploadBanner('bannerImage${status.count-1}','${template.templateFormat.fileLimit[status.count-1]}','${template.templateFormat.imageSize[status.count-1][0]}','${template.templateFormat.imageSize[status.count-1][1]}','imageCorrect${status.count-1}')">
					<input type="hidden" id="imageCorrect${status.count-1}" value="${imgCorrect}"/>
					<input type="hidden" name="blockBanners[${status.count-1}].id" value="${banner.id}"/>
					<input type="button" value="清除图檔" id="clearImg${status.count-1}"/>
					<input type="hidden" id="defaultImage${status.count-1}" value="${imgDomain}/images/ad/${template.templateFormat.imageSize[status.count-1][0]}x${template.templateFormat.imageSize[status.count-1][1]}.gif"/>
				</div>	
				<div style="margin-left:65px">
					图片规格：${template.templateFormat.imageSize[status.count-1][0]}x${template.templateFormat.imageSize[status.count-1][1]} <${template.templateFormat.fileLimit[status.count-1]}k
				</div>
				<div>
					图片连结：
					<input type="text" name="blockBanners[${status.count-1}].targetUrl" id="targetUrl${status.count-1}" value="${banner.targetUrl}" size="45"/>
				</div>
				<div style="margin-left:65px">
					例如：http://www.yaodian100.com
				</div>
				</div>
			</c-rt:forEach>
		</div>
    </s:form>
	<!--- 组 -->
</div>
<p class="c-f l-link" align="center" style="margin-top:20px"><a href="#" id="submitButton" >確定</a> <a href="#" id="cancelCreateBlockBanner">取消</a></p>
